
<template>
  <h1>管理员工</h1>
  <el-header>
    <el-button  round @click="drawer = true" type="primary" style="margin-left: 16px;">添加新员工</el-button>
    <el-drawer
        title="增加新员工"
        v-model="drawer"
        :with-header="false">
      <span><add-personnel></add-personnel></span>
    </el-drawer>
    <el-drawer
        title="修改员工"
        v-model="drawer2"
        direction=ltr>
      <span><put-personnel :id="pid"></put-personnel></span>
    </el-drawer>
  </el-header>
<!--  "pName" : "王泽",-->
<!--  "pSex" : "男",-->
<!--  "pAge" : 21,-->
<!--  "pClass" : "技术部",-->
<!--  "pTel" : "13400280751",-->
<!--  "pJoin" : "2020-10-24T16:00:00.000+00:00",-->
  <el-table
      :data="tableData.filter(data => !search || data.pName.toLowerCase().includes(search.toLowerCase()))"
      stripe
      style="width: 100%">
    <el-table-column
        label="ID"
        prop="id">
    </el-table-column>
    <el-table-column
        label="Name"
        prop="pName">
    </el-table-column>
    <el-table-column
        label="性别"
        prop="pSex">
    </el-table-column>
    <el-table-column
        label="年龄"
        prop="pAge">
    </el-table-column>
    <el-table-column
        label="部门"
        prop="pClass">
    </el-table-column>
    <el-table-column
        label="入职时间"
        prop="pJoin">
    </el-table-column>
    <el-table-column
        label="TEL"
        prop="pTel">
    </el-table-column>
    <el-table-column
        align="right">
      <template #header>
        <el-input
            v-model="search"
            size="mini"
            placeholder="输入姓名搜索"/>
      </template>
      <template #default="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import AddPersonnel from './addPersonnel.vue'
import PutPersonnel from "./putPersonnel.vue";
export default {
  name:'users',
  components:{
    PutPersonnel,
    AddPersonnel
  },
  data() {
    return {
      pid:'',
      tableData: [],
      search: '',
      drawer: false,
      drawer2:false,
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.drawer2=true;
      this.pid=row.id;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$http.delete('http://localhost:8989/personnels/'+row.id).then(res=>{
        console.log("删除成功")
      })
    },
    findAll(){
      this.axios.get('http://localhost:8989/personnels').then(res=>{
        this.tableData=res.data._embedded.personnels;
      })
    },
    // 这是一个定时器
    timer() {
      return setTimeout(()=>{
        this.findAll()
      },5000)
    }
  },
  watch: {
    tableData() {
      this.timer()
    }
  },
  destroyed() {
    clearTimeout(this.timer)
  },
  created() {
    this.findAll();
  }

}
</script>

<style>

</style>
